<template>
  <div>
    <el-form v-if="formData" :inline="true" class="filter-form-inline" label-position="right" label-width="100px"
      size="small">
      <el-row :gutter="0" style="margin-left: 0px; margin-right: 0px">
        <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
          <item-title title="基本信息" />
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item label="简称：">
            <span>{{ formData.terminalAlias }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item class="item_col" label="所在地区：">
            <span>{{ formData.provinceName }}/{{ formData.cityName }}/{{ formData.areaName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item label="所在街道：" style="width: 100%">
            <span v-if="formData?.streetName"> {{formData?.streetName}}</span>
            <span v-else>无</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item label="详细地址：">
            <span>{{ formData.address }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item label="属性：">
            <span v-if="formData.terminalType === 'first_terminal'"> {{
                getLabel('first_terminal', formData.childProperty)
              }}</span>
            <span v-if="formData.terminalType === 'second_terminal'"> {{
                getLabel('second_terminal', formData.childProperty)
              }}</span>
            <span v-if="formData.terminalType === 'third_terminal'"> {{
                getLabel('third_terminal', formData.childProperty)
              }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.terminalType === 'first_terminal'" :lg="8" :xs="4">
          <el-form-item label="等级：">
            <span>{{ getLabel('classification_standard', formData.terminalLevel) }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="formData.terminalType === 'first_terminal'" :lg="8" :xs="4">
          <el-form-item label="年门诊量：">
            <span>{{ formData.cureNum }}</span>万人次
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item label="营销区域：">
            <span>{{ formData.saleAreaName }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item label="创建时间：">
            <span> {{ dateFormat("yyyy-mm-dd HH:MM:SS", formData.createdAt) }} </span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item class="item_col" label="联系人：">
            <span>{{ formData.contacts }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item class="item_col" label="联系电话：">
            <span>{{ formData.tel }}</span>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xs="4">
          <el-form-item class="item_col" label="创建人：">
            <span>{{ formData.creatorName }}</span>
          </el-form-item>
        </el-col>
        <template v-if="qualification">
          <el-col :lg="24" :xs="4" style="padding-left: 0;padding-right: 0">
            <item-title title="资质信息" />
          </el-col>
          <el-col :lg="24">
            <div v-if="formData.qualifications.length > 0" class="qualityFiles-container">
              <div v-for="(item,index) in formData.qualifications" :key="index" class="file-item">
                <image-upload-view ref="imageUploadView" :data="item" disabled="true" />
              </div>
            </div>
            <div v-else>
              <el-empty description="该终端未上传资质" />
            </div>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { inject, reactive, toRefs, watch } from "vue";

export default {
  name: "Details",
  props: {
    formData: {
      type: Object,
      default: {},
    },
    qualification: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    const api = inject("api");
    const data = reactive({
      formData: {
        qualifications: [],
      },
    });
    watch(
      () => props.formData,
      (newval, oldval) => {
        if (newval) {
          data.formData = newval;
        }
      },
      { immediate: true, deep: true }
    );
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
:deep(.item_col) {
  width: 100%;

  .el-form-item__content {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
